<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="分页.css">
</head>

<body>
  <div class="body">

  </div>
  <!-- 分页的容器 -->
  <div class="paginate"></div>
  <script src="分页.js"></script>
  <script>
    let options = {
      // 控制分页上按钮显示的内容
      language: {
        first: '首页',
        prev: '<',
        //list:'',
        next: '>',
        last: '>>'
      },
      // 控制数据的
      data: {
        total: 201,//数据总条数
        pageSize: 10// 每一页显示多少条
      }
    }
    let data = [];
    for (let i = 0; i < 201; i++) {
      data.push(`我是第${i + 1}条数据`);
    }
    let p = new Page('.paginate', options, current => {

      let str = ''
      let end = current * 10 >= 201 ? 201 : current * 10
      for (var i = (current - 1) * 10; i < end; i++) {
        document.querySelector('.body').innerHTML = '';
        str += `<p>${data[i]}</p>`
      }
      document.querySelector('.body').innerHTML = str;
    })
  </script>
</body>

</html>